<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<title>Detail View 3 Template</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1,  minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../common/css/app.min.css">
<script src="../common/js/jQuery2.0.2.min.js"></script>
<script src="../common/js/main.min.js"></script>

</head>

<body>

<div class="app-wrapper">

<nav class="main-menu">
<a href="#">Something</a>
<a href="#">Something</a>
<a href="#">Something</a>
</nav><!--#main-menu-->

<header>
<div class="main-menu-button main-menu-button-left"><a class="menu">&nbsp;</a></div>
<div class="main-menu-button main-menu-button-right"><a class="gear">&nbsp;</a></div>
<h1>Order</h1>
</header>

<div class="app-content">

<div class="detail-view-header with-action-panel">
    <div class="content">
        <h1>#310129123</h1>
        <div class="status status-red"><span class="status-dot">&nbsp;</span>Processing</div>
        <div class="detail-view-action-panel">
            <a href="#" class="action-history open-modal">&nbsp;</a>
            <a href="#" class="action-closeloss open-modal">&nbsp;</a>
            <a href="#" class="action-phone open-modal">&nbsp;</a>
        </div>
    </div><!--.content-->
</div><!--.detail-view-header-->

<section class="opportunity-overview">
    <div class="content">
        <h1>$45,012</h1>
        Delivery date 07/11/2013
    </div>
</section>

<section class="border-top">
    <div class="content">
            <h1 class="inline">Acme</h1>
            <p>
                1 Main Street<br/>
                San Francisco, CA 94105<br/>
                USA
            </p>
    </div>
</section>

<section class="border-top">
    <div class="content">
       <h3>Products</h3>
        <p>
            <a href="#">Oldfashioned Bridge</a><br/>
            4 @ $32,123
        </p>
        <p class="no-bottom-padding">
            <a href="#">Tshirts</a><br/>
            432 @ $12.95
        </p>
    </div>
</section>

<section class="data-capture-buttons one-buttons">
    <div class="content">
        <a href="#">edit</a>
    </div>
</section><!--.data-capture-buttons-->

</div><!--#app-content-->
</div><!--#app-wrapper-->

<div class="modal">
    <div class="background"></div>
    <div class="modal-content-wrapper">
        <div class="modal-content">
            <div class="detail-view-header">
                <div class="content">
                    <h1>Header Here</h1>
                </div><!--.content-->
            </div><!--.detail-view-header-->
            <section style="min-height:70%;">
                <div class="content">
                    <center>Content Here</center>
                </div><!-- .content -->
            </section>
            <section>
                <div class="content">
                    <div class="data-capture-buttons two-buttons">
                        <div class="content">
                            <a href="#" class="close-modal">cancel</a>
                            <a href="#" class="close-modal">submit</a>
                        </div><!-- .content -->
                    </div><!--.data-capture-buttons-->
                </div><!-- .content -->
            </section>
        </div> <!-- .modal-content -->
    </div><!-- .modal-content-wrapper -->
</div><!-- #modal.modal -->

</body>
</html>
